<template>
	<NavBar :height="70">
		<view class="navber"></view>
	</NavBar>
	<view class="container" :style="{ height: contentHeight + 'px' }">
		<view class="header" ref="header">
			<view class="header_item" @click="changeBorderStyle(1)">
				<view class="header_item_name">电影票</view>
				<view :class="['underline', { active: activeIndex === 1, inactive: activeIndex !== 1 }]" />
			</view>
			<view class="header_item" @click="changeBorderStyle(2)">
				<view class="header_item_name">演出票</view>
				<view :class="['underline', {'active': activeIndex === 2, 'inactive': activeIndex !== 2}]" />
			</view>
		</view>
		<view class="content">
			<component :is="dynamicComp"></component>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, shallowRef } from "vue";
	import NavBar from "../../components/cusNavBar.vue";
	import MovieTicket from "../wallet/movieTicket.vue";
	import PerformanceTickets from "../wallet/performanceTickets.vue"


	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		contentHeight.value = systemInfo.windowHeight - 100; // 视口高度减去 100px
	})
	//
	const contentHeight = ref(0);
	
	const activeIndex = ref(1);
	const dynamicComp = shallowRef(MovieTicket);

	const changeBorderStyle = (index) => {
		activeIndex.value = index;
		if (index === 1) {
			dynamicComp.value = MovieTicket;
		} else {
			dynamicComp.value = PerformanceTickets;
		}
	};
</script>

<style scoped lang="scss">
	.navber {
		height: 100%;
		background-color: #ff2a63;
	}

	.container {
		width: 100%;
		// height: calc(100% - 100px);
		position: fixed;
		top: 50px;
		border-radius: 15px 15px 0 0;

		.header {
			display: flex;
			flex-direction: row;

			.header_item {
				height: 50px;
				width: 50%;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: orange;

				.header_item_name {
					font-size: 20px;
					margin-bottom: 5px;
				}

				.underline {
					width: 60px;
					// height:5px;
					border: 1px solid #ccc;
				}

				.active {
					border: 1px solid #ff2a63;
				}

				.inactive {
					border: 1px solid #ccc;
				}


			}

		}

		.content {}
	}
</style>